<!-- 用户导入弹窗 -->
<template>
  <el-dialog
      title="导入配置补货"
      :visible="visible"
      width="440px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-upload
        v-loading="loading"
        action=""
        accept=".xls,.xlsx"
        :before-upload="beforeUpload"
        :show-file-list="false"
        drag
        class="ele-block">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
      <div class="el-upload__tip ele-text-center" slot="tip">
        <span>只能上传xls、xlsx文件，</span>
        <el-link
            type="primary"
            :underline="false"
            @click="downloadExcel"
            style="vertical-align: baseline;"
            download>下载模板
        </el-link>
      </div>
    </el-upload>
  </el-dialog>
</template>

<script>
import XLSX from 'xlsx'
export default {
  name: 'UserImport',
  props: {
    // 是否打开弹窗
    visible: Boolean,
	mid:Number
  },
  data() {
    return {
      // 导入请求状态
      loading: false,
     
    }
  },
  methods: {
	/* 上传 */
	beforeUpload(file) {
		this.loading = true;
		let formData = new FormData();
		formData.append('file', file);
		this.$http.post('/scm/base/pzbhmx/importExcel', formData
		,{
			params:{
			mid: this.mid
		}
	}).then(res => {
		this.loading = false;
		if (res.data.code === 0) {
		this.$message({type: 'success', message: res.data.msg});
		this.updateVisible(false);
		this.$emit('done');
		} else {
		this.$message.error(res.data.msg);
		}
	}).catch(e => {
		this.loading = false;
		this.$message.error(e.message);
	});
		return false;
	},
	//生成配置补货excel
	downloadExcel(){
		let excelData = [
		['pzmx1','pzmx2','pzmx3','pzmx4','pzmx5','pzmx6','remark'],
		['明细值1','明细值2','明细值3','明细值4','明细值5','明细值6','备注']
		]
		let ws = XLSX.utils.aoa_to_sheet(excelData)
		let wb = XLSX.utils.book_new()
		XLSX.utils.book_append_sheet(wb,ws,'配置补货明细')
		XLSX.writeFile(wb,'配置补货明细.xlsx')
	},
	/* 更新visible */
		updateVisible(value) {
		this.$emit('update:visible', value);
		}
	}
}
</script>

<style scoped>
.ele-block ::v-deep .el-upload,
.ele-block ::v-deep .el-upload-dragger {
  width: 100%;
}
</style>